<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>校园地图 - [[${schoolName}]]</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <link rel="stylesheet" th:href="@{/plug/layui/css/layui.css}" />
    <link rel="stylesheet" th:href="@{/css/page.css}" />
    <style>
        html, body { height: 100%; margin: 0; }
        .map-wrap { height: calc(100vh - 20px); padding: 10px; }
        #mapContainer { width: 100%; height: 100%; border-radius: 12px; overflow: hidden; }
        .info-panel { position: absolute; top: 20px; left: 20px; background: #fff; border-radius: 10px; padding: 12px 14px; box-shadow: 0 4px 16px rgba(0,0,0,.1); z-index: 999; }
        .info-panel h3 { margin: 0 0 6px; font-size: 16px; }
        .info-panel p { margin: 4px 0; color: #666; }
        .btns { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
    </style>
</head>
<body>
<div class="map-wrap">
    <div class="info-panel">
        <h3>[[${schoolName}]]</h3>
        <p>地址：[[${schoolAddress}]]</p>
        <div class="btns">
            <!-- 高德 URI 导航（车驾） -->
            <a class="layui-btn layui-btn-sm" th:href="'https://uri.amap.com/navigation?to=' + ${lng} + ',' + ${lat} + ',' + ${schoolName} + '&mode=car&src=kindergarten' " target="_blank">高德导航</a>
            <!-- 高德步行 -->
            <a class="layui-btn layui-btn-sm layui-btn-primary" th:href="'https://uri.amap.com/navigation?to=' + ${lng} + ',' + ${lat} + ',' + ${schoolName} + '&mode=walk&src=kindergarten' " target="_blank">步行路线</a>
            <!-- 复制地址 -->
            <button class="layui-btn layui-btn-sm layui-btn-normal" id="copyAddrBtn">复制地址</button>
        </div>
    </div>
    <div id="mapContainer"></div>
</div>

<!-- AMap Loader（官方推荐加载方式） -->
<script th:src="'https://webapi.amap.com/loader.js'"></script>
<script th:inline="javascript">
    // 将后端变量注入 JS 作用域
    const AMAP_KEY = /*[[${amapKey}]]*/ "";
    const SCHOOL_NAME = /*[[${schoolName}]]*/ "幼儿园";
    const SCHOOL_ADDRESS = /*[[${schoolAddress}]]*/ "未配置地址";
    const LNG = parseFloat(/*[[${lng}]]*/ "116.397389");
    const LAT = parseFloat(/*[[${lat}]]*/ "39.908722");
</script>
<script th:src="@{/js/map/campusMap.js}"></script>
<script th:src="@{/plug/layui/layui.js}"></script>
<script>
layui.use([], function(){
    // 复制地址按钮
    document.getElementById('copyAddrBtn').addEventListener('click', function(){
        const text = SCHOOL_NAME + '：' + SCHOOL_ADDRESS;
        navigator.clipboard.writeText(text).then(()=>{
            layer.msg('已复制到剪贴板');
        }).catch(()=>{
            layer.msg('复制失败，请手动选择复制');
        });
    });
});
</script>
</body>
</html>
